<template>
  <div class='app-container'>
      <div class='app-box clear'>
        <div class='inputbox'>
           <div class="day-top clearfix">
               <div class="top1">
                <span>选择年份：</span>
            
                   <el-select v-model="value5" class="wd210" size="mini"  placeholder="请选择" @change="changeList(1)">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </div>
              <!-- <el-dropdown split-button type="primary" @click="toSearch" size="mini" placement='bottom-end' class="day-dropdown" >
                  搜索
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>导出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
           </div>
           <!-- <div class="unitbox"><span>(单位：万元)</span></div> -->
            <!-- 业务列表 -->
           <div class="targetTable">  
             <el-table
                :data="tableData"
                 stripe
                v-loading="loading"
                style="width: 100%">
                <el-table-column
                  fixed
                  prop="organizationUnitName"
                  label="组织机构"
                  >
                </el-table-column>
                <el-table-column
                  label="时间（年）"
                  prop="effectiveYear"
                  >
                  <!-- <template slot-scope="scope">
                       <span v-if="!scope.row.isShow">{{ scope.row.name }}</span>
                        <span v-if="scope.row.isShow">
                            <el-select v-model="baoFeiLable.yearChoise" :class="changeColor == true ?'danger':''"  size="mini" placeholder="请选择年份">
                              <el-option
                                v-for="item in yearChoiseData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </span>
                  </template>-->
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="目标保费（万元）"
                  >
                   <template slot-scope="scope">
                       <span v-if="!scope.row.isShow" >{{ scope.row.targetPremium ==null?'-':scope.row.targetPremium }}</span>
                       <span v-if="scope.row.isShow">
                          <el-input v-model="baoFeiLable.baofei" onkeyup="this.value=this.value.replace(/[^\d\.]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " :class="changeColor == true ?'danger':''" size="mini" placeholder="请输入目标保费"   @focus="returnColor"></el-input>
                        </span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="right"
                  >
                  <template slot-scope="scope">
        
                        <span  class="switch-btn" v-if="!scope.row.isShow"  @click="changeType(scope.row)">编辑</span>
                         

                         <span  class="switch-btn" v-if="scope.row.isShow"  @click="saveVal(scope.row,scope.row.organizationUnitId,1)">保存</span>
                         <span class="edit-btn" v-if="scope.row.isShow" @click="deleteVal(scope.row)">取消</span>
                  </template>
                </el-table-column>
              </el-table>
           </div>
            <div  class='page-right'>
                <el-pagination @current-change="handleCurrentChange" :current-page.sync='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>
            </div>
        </div>
          
      </div>
  </div>
</template>
<script>
import ztreeSelect from "@/components/z-select/index.vue";
import Vue from'vue'
export default {
   components: {
    ztreeSelect
  },
  data() {
    return {
      treeData:[],
      //数组子级相关参数
      childprops: {
        name: "displayName", //显示名字
        children: "organizationUnits", //子级字段名
        lv: "level" //当前层级
      },
      editFlag:true,
      loading:false,
      organizationUnitId:'',
       tableData: "",
        currentPage:1,
        pagetotal:10,
        //编辑状态

        bianjiType:false,
       //数据类型选项
      options: [
        {
          value: "2018",
          label: "2018"
        },
        {
          value: "2019",
          label: "2019"
        },
        {
          value: "2020",
          label: "2020"
        },
        {
          value: "2021",
          label: "2021"
        },
        {
          value: "2022",
          label: "2022"
        },
    
      ],
      value5: '2018',
        baoFeiLable:{},
        //改变颜色
        changeColor:false,
    };
  },
  mounted() {
      
  },
  watch: {
    $route(to, from) {
      console.log(this.$route.query);
      console.log("is change the route")
      this.value5 = this.$route.query.effectiveYear;
      this.currentPage = this.$route.query.pageIndex;
     // this.getList(this.value5, this.currentPage) 
    }
  },
  computed: {
   
  },
  created() {
    if (this.$route.query.effectiveYear) {
      this.value5 = this.$route.query.effectiveYear;
    }
    if (this.$route.query.pageIndex) {
       this.currentPage = this.$route.query.pageIndex;
    }
    this.getList(this.value5,this.currentPage) 
  },
  methods: {
     // 机构
     getList(val,page) {
          this.loading = true;
          let params = {
            "effectiveYear":val,
            "pageIndex":page,
          };
          this.post(params, "services/app/report/GetTargetSettings").then(rs => {
            // console.log(rs);
            if (rs.success) {
               this.loading = false;
              let data = rs.result;
              this.tableData = data.items
              this.pagetotal = data.totleCount
              // console.log(this.tableData)
              if(this.$route.query.pageIndex){
							this.currentPage = Number(this.$route.query.pageIndex);
		    			}
            }
          });
    },
    //改变状态
    changeType(val) {
      console.log(val)
      // Vue.set(this.baoFeiLable,'baofei',)
      if(this.bianjiType){
          this.changeColorClass()
          return
      }else{
        //  if(val.targetPremium == 0){
        //     var taNum = '0'
        //    }else{
        //      var taNum = val.targetPremium
        //    }
        //  this.baoFeiLable = Object.assign({},{},{
          
        //       baofei:taNum,
        //       yearChoise:''

        //   })
          Vue.set(val,'isShow',true)
          this.bianjiType = true
      }
     
    },
    changeColorClass(){
      this.changeColor = true;
        this.$message.error('请先保存目标保费')  
    },
    returnColor(){
      this.changeColor = false;
    },
    deleteVal(val){
       if(this.bianjiType){
          this.bianjiType = false
          this.changeColor = false;
      }
      Vue.set(val,'isShow',false)
    },
    //搜索
    toSearch(){

    },
    //保存
    saveVal(alldata,val,type){
      // services/app/report/UpdateTargetSetting
      if(this.baoFeiLable.baofei){

      }
      console.log(val)
      if(type == 1){
        let params = {
            "organizationUnitId":val,
            "type":type,
            "effectiveYear":this.value5 ,
            "targetPremium":this.baoFeiLable.baofei,
          };
          this.post(params, "services/app/report/UpdateTargetSetting").then(rs => {
            // console.log(rs);
            if (rs.success) {
                var text = "保存"
                 this.$notify({
                    title: text+"成功",
                    message: "您已成功"+text,
                    type: "success",
                    customClass: "el-notification-success"
                  });
                  this.getList(this.value5,this.currentPage)
            }
          });
      }else{
         this.$confirm('是否确认删除目标保费？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

           let params = {
              "organizationUnitId":val,
              "type":type,
              "effectiveYear":this.value5 ,
              "targetPremium":this.baoFeiLable.baofei,
            };
            this.post(params, "services/app/report/UpdateTargetSetting").then(rs => {
              // console.log(rs);
              if (rs.success) {
                  var text = "删除"
                  this.$notify({
                      title: text+"成功",
                      message: "您已成功"+text,
                      type: "success",
                      customClass: "el-notification-success"
                    });
                    this.getList(this.value5,this.currentPage)
              }
            });
        })
      }
        
      this.deleteVal(alldata)
    },
    //分页
    handleCurrentChange(page){
      this.$router.push({
        name: "targetset",
        query: {
         "effectiveYear": this.value5,
          "pageIndex": page,
        }
      });
      //this.getList(this.value5,page)
    },
    changeList(){
      this.$router.push({
        name: "targetset",
        query: {
         "effectiveYear": this.value5,
          "pageIndex": 1,
        }
      });
    }
  },
 
};
</script>
<style lang="scss" scoped>

.wd60{
  width: 60px;
}
.wd120{
  width: 120px;
}
.wd210{
  width: 180px;
}
.switch-btn {
    color: #027dca;
    margin-right: 10px;
    cursor: pointer;
}
.edit-btn {
    color: #027dca;
    cursor: pointer;
}
.page-right{
        width: 100%;
        text-align: right;
        margin-top: 50px;
    }
.app-box{
  color: #333;
  .day-top{
    margin-bottom: 30px;
    color: #666;
    .top1{
      float:left;
      width: 26%;
    }
    .day-dropdown{
      float: right
    }
   
  }
  .unitbox{
      height: 40px;
      line-height: 40px;
      span{
          font-weight: 600;
      }
  }
}
 .baofeiDetail{
    display: flex;
    div{
      padding: 8px;
    }
  }
@media screen and (min-width: 1280px) and (max-width: 1380px){
  .wd210{
    width: 150px;
  }
  .app-box{
    .day-top{
      margin-bottom: 30px;
      .top1{
        float:left;
        width: 26%;
      }
    }
  }
}
</style>